<template>
  <div>
    <el-card shadow="never" class="box-card">
      <div slot="header" class="clearfix">
        <span>新增文章</span>
      </div>
      <div class="text item">
        <el-form :rules="rule" ref="form" :model="form" label-width="80px">
          <el-form-item label="文章" prop="author">
            <el-input
              style="width: 300px"
              placeholder="作者姓名"
              v-model="form.author"
              clearable
            >
            </el-input>
          </el-form-item>

          <el-form-item label="标题" prop="title">
            <el-input placeholder="文章标题" v-model="form.title" clearable>
            </el-input>
          </el-form-item>

          <el-form-item label="是否显示" prop="title">
            <el-switch
              v-model="form.isShow"
              active-color="#13ce66"
              inactive-color="#ff4949"
            >
            </el-switch>
          </el-form-item>

          <el-form-item label="摘要">
            <el-row>
              <el-col :span="20">
                <el-input
                  style="width: 716px"
                  type="textarea"
                  :rows="3"
                  placeholder="摘要"
                  v-model="form.summary"
                >
                </el-input>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item label="封面图片">
            <el-upload
              style="width: 680px; margin-left: -20px"
              action="http://localhost:9528/lejuAdmin/material/uploadFileOss"
              :headers="headers"
              ref="upload1"
              :on-success="uploadSuccess"
            >
              <el-button size="small" type="primary">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">
                只能上传jpg/png文件，且不超过500kb
              </div>
            </el-upload>
            <img
              v-if="form.coverImg"
              style="width: 150px; height: 150px"
              :src="form.coverImg"
              alt=""
            />
          </el-form-item>
          <el-form-item label="切换文本">
            <el-radio style="margin: 0 20px" v-model="form.editorType" label="0"
              >富文本</el-radio
            >
            <el-radio v-model="form.editorType" label="1">Markdown</el-radio>

            <span style="margin-left: 20px; font-size: 12px; color: #e6a23c"
              ><i class="el-icon-warning"></i> 注意!切换编辑器会清空编辑内容
            </span>
          </el-form-item>
          <el-form-item label="">
            <el-button type="primary"
              >在下文此处插入图片<i class="el-icon-bottom"></i
            ></el-button>
          </el-form-item>
        </el-form>
      </div>
      <tinEditor ref="tin" v-if="form.editorType == 0"></tinEditor>
      <mdEditor ref="md" v-if="form.editorType == 1"></mdEditor>
      <el-button @click="addNow" style="margin-top: 20px" type="primary"
        >立即修改</el-button
      >
    </el-card>
  </div>
</template>

<script>
import { getToken } from "@/utils/myAuth";
import tinEditor from "@/components/Tinymce/index.vue";
import mdEditor from "@/components/MarkdownEditor/index";
import articleApi from "@/api/article";

export default {
  components: { tinEditor, mdEditor },

  data() {
    return {
      form: {
        author: "",
        title: "",
        isShow: true,
        content2: "",
        editorType: "0",
        coverImg: "",
        summary: "",
      },
      start: "",
      limit: "",
      id: "",
      rule: {
        author: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        title: [{ required: true, message: "请输入标题", trigger: "blur" }],
      },
    };
  },

  created() {
    this.id = this.$route.query.id;
    this.start = this.$route.query.start;
    this.limit = this.$route.query.limit;

    articleApi.productArticle(this.id).then((res) => {
      console.log(res);
      if (res.data.productArticle.editorType == 0) {
        this.$nextTick(() => {
          this.$refs.tin.setContent(res.data.productArticle.content1);
        });
      } else {
        this.$nextTick(() => {
          // console.log(this.$refs.md.setHtml);
          // this.$refs.md.setHtml(res.data.productArticle.content1);
        });
      }
      if (res.data.productArticle.editorType) {
        res.data.productArticle.editorType = "1";
      } else {
        res.data.productArticle.editorType = "0";
      }

      if (res.data.productArticle.isShow) {
        res.data.productArticle.isShow = true;
      } else {
        res.data.productArticle.isShow = false;
      }
      this.form = res.data.productArticle;
    });
  },

  mounted() {},

  methods: {
    // 立即新增
    addNow() {
      if (this.form.editorType == 0) {
        this.form.content2 = this.$refs.tin.getContent();
      } else {
        this.form.content2 = this.$refs.md.getValue();
      }
      this.$refs.form.validate((valid) => {
        if (valid) {
          articleApi
            .updateArticl(
              {
                author: this.form.author,
                title: this.form.title,
                isShow: Number(this.form.isShow),
                content1: this.form.content1,
                content2: this.form.content2,
                editorType: this.form.editorType,
                coverImg: this.form.coverImg,
                summary: this.form.summary,
                id:this.form.id
              }
              // this.form
            )
            .then((res) => {
              console.log(res);
              if (res.success) {
                this.$router.go(-1);
                this.$message.success("更新成功");
              } else {
                this.$message.error(res.message);
              }
            });
        } else {
          this.$message.error("请填写必填项");
        }
      });
    },
    // 图片上传成功
    uploadSuccess(res, file) {
      if (res.success) {
        this.imageUrl = res.data.fileUrl;
        this.$refs.upload1.clearFiles();
        this.$forceUpdate();
      } else {
        this.$message.error(res.message);
      }

      console.log(res);
      this.form.coverImg = res.data.fileUrl;
    },
  },

  computed: {
    headers() {
      const token = getToken();
      return { token };
    },
  },

  watch: {},
};
</script>

<style scoped lang='scss'>
.box-card {
  width: 97%;
  margin: 15px auto;
}
span {
  font-size: 14px;
}
.el-form-item__error {
  position: absolute;
  top: 100%;
  left: 42px;
}
</style>